<template>
	<van-dialog use-slot :show="showDialog" :showConfirmButton="false" customStyle="border-radius: 4rpx"
		@close="showDialog=false">
		<view class="dialog-box">
			<slot></slot>
			<view class="dialog-btn">
				<van-button block plain color="#161616" :custom-style="btnStyle"
					@click="showDialog=false">{{cancelText}}</van-button>
				<van-button block color="#4078E5" :custom-style="btnStyle" @click="comfirm">{{comfirmText}}</van-button>
			</view>
		</view>
	</van-dialog>
</template>

<script>
	export default {
		name: "c-center-dialog",
		props: {
			cancelText: {
				typeof: String,
				default: '取消'
			},
			comfirmText: {
				typeof: String,
				default: '确定'
			}
		},
		data() {
			return {
				showDialog: false,
				btnStyle: 'height: 64rpx;border-radius: 4rpx 4rpx 4rpx 4rpx;'
			};
		},
		methods: {
			show() {
				this.showDialog = true
			},
			close() {
				this.showDialog = false
			},
			comfirm() {
				this.$emit('comfirm')
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog-box {
		font-size: 30rpx;
		padding: 48rpx 32rpx;
		text-align: center;


		.dialog-btn {
			margin: 32rpx 36rpx 0;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24rpx;
		}
	}
</style>